  <script setup lang="ts">
  import { NFlex, NMenu, NLayoutSider, NBreadcrumb, NBreadcrumbItem, NPageHeader } from 'naive-ui'
  import type { MenuOption } from 'naive-ui'

  import { ChevronDown } from '@vicons/carbon';

  import { NIcon } from 'naive-ui'
  import { h, ref } from 'vue'
  import { RouterLink } from 'vue-router'


  import { useBreadcrumbStore } from '@/store/tools/breadcrumbs'

  const breadcrumbStore = useBreadcrumbStore()


  import { menusOptions } from '@/apis/sys/menu';

  const menuOptions: MenuOption[] = menusOptions

  let collapsed = ref(false)
  let renderMenuLabel = (option: MenuOption) => {
    if ('href' in option) {
      return h(
        'a',
        { href: option.href, target: '_blank' },
        option.label as string
      )
    } else if ('router' in option) {
      return h(
        RouterLink,
        {
          to: {
            name: (option.router + ""),
            params: {
              lang: 'zh-CN'
            }
          }
        },
        option.label as string
      )
    }
    return option.label as string
  }


  let expandIcon = () => {
    return h(NIcon, null, { default: () => h(ChevronDown) });
  }


  let home = ref<any>()
  let breadcrumbs = ref<any[]>()

  let c = 0;

  let selectMenu = (key: string, i: MenuOption) => {
    i['clickable'] = (key !== "home")
    home.value = i;
    let _breadcrumbs: any = [];
    if (key !== "home") {
      _breadcrumbs = judgeItem(menuOptions, key)
      breadcrumbStore.updateBreadcrumbs(_breadcrumbs);
    } else {
      breadcrumbStore.updateBreadcrumbs(_breadcrumbs);
    }
    c = 0;
    localStorage.setItem("curPath", key);
    localStorage.setItem("breadcrumbs", JSON.stringify(breadcrumbs));
  }

  let _parent: MenuOption;
  let _current: MenuOption;


  function judgeItem(ms: MenuOption[], key: string): MenuOption[] {
    if (c == 0) {
      home.value = ms[0]
    }
    c++;
    for (let i = 0; i < ms.length; i++) {
      let item: MenuOption = ms[i];
      if (item.children && item.children?.length > 0) {
        item['clickable'] = false;
        _parent = item
        _current = judgeItem(item.children, key)[1];
      } else {
        if (item.key == key) {
          item['clickable'] = false;
          _current = item;
        }
      }
    }
    return [_parent, _current]
  }

  import { useRouter } from 'vue-router'
  let router = useRouter();
  let menuValue = ref();



  let oldPath = localStorage.getItem("curPath");
  if (oldPath) {

    let menuPath = oldPath;
    if (oldPath === 'usergroupindex') {
      menuPath = "userindex"
    }

    menuValue.value = menuPath;
    router.push({
      name: oldPath
    })
    breadcrumbStore.initFromStorage()
  }



</script>

  <template>
    <n-layout has-sider style="height: 100vh;display: flex;">
      <n-layout-sider width="240" style="height:100vh;" bordered collapse-mode="width" :collapsed-width="64"
        :collapsed="collapsed" show-trigger @collapse="() => { collapsed = true; }"
        @expand="() => { collapsed = false; }">
        <div style="height:3rem;line-height:3rem;text-align: center;">秒租地产管理系统</div>
        <n-menu accordion :inverted="false" :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22"
          :options="menuOptions" :render-label="renderMenuLabel" :expand-icon="expandIcon"
          v-on:update-value="selectMenu" :default-value="menuValue" />
      </n-layout-sider>
      <n-layout-content class="right_box">
        <n-flex :size="0" vertical>
          <div class="right_header row row-center">
            <n-page-header>
              <n-breadcrumb style="padding-left:20px">
                <n-breadcrumb-item :clickable="home?.clickable" :href="'/' + (home?.clickable ? home.router : '')"> 首页
                </n-breadcrumb-item>
                <n-breadcrumb-item v-for="item in breadcrumbStore.list" :clickable="item?.clickable"
                  :href="item.clickable ? item.router : ''">
                  {{ item.label }}
                </n-breadcrumb-item>
              </n-breadcrumb>
            </n-page-header>
          </div>
          <div class="right_content">
            <router-view></router-view>
          </div>
        </n-flex>
      </n-layout-content>

    </n-layout>
  </template>

<style scoped lang="scss">
.right_box {
  flex: 1;
  min-width: 0;
  padding: 0;

  .right_header {
    height: 50px;
    background-color: #fff;
    color: #333;
    line-height: 50px;
  }

  .right_content {
    height: calc(100vh - 90px);
    padding: 20px;

    .mc_1 {
      background-color: #fff;
    }
  }
}

.Breadcrumb {
  >ul {
    padding: 0;
    /* 移除内边距 */
    margin: 0;
    /* 移除外边距（浏览器可能默认有 margin） */
    list-style-type: none;
    /* 可选：移除列表项符号（如不需要） */

  }
}
</style>
